Funko HUB
A forum web app designed for collectors of Funko Pops to share their thought's, opinions, and anything fun about the hobby! It includes a user registration, which will then allow users to create posts, share pictures, comment on others posts, and chat with other collectors. Designed for my Senior Project(GIT 480) and GIT 417 final project.
Project requirements(GIT 417 only):
- The site needs to display properly at 1280px wide, with properly coded HTML, CSS, and JavaScript files.
- There should be no errors in the console on page load or when interacting with the page
- The JavaScript must be obfuscated
- A number guessing game where users submit a number 1-10, and there needs to be a random number generated to check user input against, to determine if they "win" or "lose"
- A toggle to switch from light and dark mode on the page
- A form for user input to submit a full name, email/phone, preference of contact, and a message, which will be validated for proper input
Tools and assets:
I developed the project entirely in Visual Studio Code, and used Heroku to host the web app. The icons used for the color toggle were implemented using font awesome. For the images for posts, I got all free images from Unsplash(https://unsplash.com/s/photos/funko-pop?license=free) to be safe in using them. I also used the documentation of Django, and Django channels in particular (chatting function and redis) - Tutorial Part 1: Basic Setup — Channels 4.0.0 documentation
Purpose:
I wanted to create a web app similar to a forum or blog, that is a central hub for collectors of Funko products. I originally planned the project as my senior project and decided to use it for my GIT 417 class project as well. The web app includes common features found on many sites, such as allowing users to create an account and then create posts with images which other logged-in users can comment on and like. I also decided to include a chatting feature which I could build on later on if I wanted as this is also common on many apps. In addition it includes a the necessary javascript requirements on the front end of the main page(color toggle, guessing game, contact form, content filtering).
The target users would be Funko collectors and possibly those involved in the Funko company itself whom want to do polls or release updates/news. I wanted it to be easy to navigate and offer ways to filter posts for users to find pertinent information or fun content.
Process:
I set the project up to be a full-stack functioning app, so there was a lot that went into developing and designing the entre web app on botht the back and front end. I wanted to get the most important/hardest elements done first, and then focus more on the User interface and hosting if I had time.
I decided what features were integral to the end-goal and focused on getting the backend working using Django, the Python framework. I did set up the structure of the frontend as I went about developing the backedn as well. I got the posting/liking/commenting implemented, and then went about setting up the chatting app and users app within the project. For the chatting feature, I relied on the Django channels to set it up and allow users to join chatrooms and send messages in real time using redis to enable websocket connection. The users app was easy as Django abstracts a lot of the functionality and enables csrf protection when users submit information. Overall, the backend was fairly smooth as much as it can be, navigating issues with databse retireval, saving, etc.
Next I ensured I could get the web app hosted, and eventually got it working on Heroku after setting up the proper settings and files to get it functioning. After this I put focus on the frontend design working to get the web app responsive and laid out in a simple yet aesthetic outline.
Wireframes:
I followed my frontend wireframe for the most part, but did reorder some elements to make it simpler when making the web app responsive, which was a pain with so many separate pages. While working on the frontend, I also implemented the JavaScript features necessary for the GIT 417 requirements, including the dark/light mode, contact form, product switcher(in this case the post filter), and the number guessing game. I also included a hamburger menu dropdown when the page was at smaller sizes as well using JavaScript. Throughout this process I would test the web app locally and on Heroku, to find bugs, and make fixes on both the front and backend
Final Product(Main Page):
Main Page
Dark Mode
Post filter
Guessing Game
Contact form(invalid input)
End Result:
I ended up achieving my goal with the product, developing both ends of the project and including the features I set out to implement. The posting, liking, commenting, and chatting all work as they should, and I included other functions such as editing posts/deleting posts, and all the necessary JavaScript for GIT 417. The final product is also responsive with a dropdown menu for smaller screen sizes, with a relatively well styled front-end. The User Interface is what I would like to spend more time on, but all in all, I am quite satisfied with the result. I did enjoy developing the backend more, as results are easy to see. When it works it works, where as the frontend is quite subjective.
Final thoughts and Future Progression:
Frontend - While I am satisfied with the project, I plan to make some user interface changes and upgrades. This is especially true on the individual post page, and the chatting page which are both quite bland and basic. In addition, I will make it so the light/dark mode works on each page and not just the main page. I would also add some simple changes to make the user interface more appealing adding different element effects such as hovers etc.
Hosting - I would like to enable a Heroku database so data will be stored, as now I only have my local database uploaded and all the changes are ephemeral on the hosted web app. Besides this, I have redis running on Heroku so I think this would be the only addition in regards to hosting.
Backend - Most defiently would need to ensure I set the boundaries toa ccess elements better such as logging in to access the chatrooms. I would also want to utilize ajax for a few of the post page features such as the liking and commenting. As of now they initialize a page reload, and with ajax I could make these changes without a reload allowing a smoother user interface. Setting up the chatting to save messages up to either a certain amount of time or save a certain number of messages is another feature I would want to implement.
